<template>
  <view class="settings-container">
    <!-- 系统设置 -->
    <view class="settings-section card">
      <view class="section-header">
        <text>系统设置</text>
      </view>
      
      <view class="setting-item">
        <text>通知设置</text>
        <switch checked />
      </view>
      
      <view class="setting-item">
        <text>自动锁定时间</text>
        <picker 
          mode="selector" 
          :range="lockTimes" 
          @change="onLockTimeChange"
        >
          <view class="picker-value">{{ selectedLockTime }}</view>
        </picker>
      </view>
      
      <view class="setting-item">
        <text>安全设置</text>
        <navigator url="/pages/security/security" class="arrow">></navigator>
      </view>
    </view>
    
    <!-- 关于 -->
    <view class="settings-section card">
      <view class="section-header">
        <text>关于</text>
      </view>
      
      <view class="setting-item">
        <text>版本信息</text>
        <text>v1.0.0</text>
      </view>
      
      <view class="setting-item" @click="checkUpdate">
        <text>检查更新</text>
        <text class="arrow">></text>
      </view>
      
      <view class="setting-item" @click="showHelp">
        <text>帮助与反馈</text>
        <text class="arrow">></text>
      </view>
    </view>
    
    <!-- 退出登录 -->
    <button class="logout-btn" @click="logout">退出登录</button>
  </view>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const lockTimes = ref(['30秒', '1分钟', '3分钟', '5分钟', '从不'])
    const selectedLockTime = ref('3分钟')
    
    const onLockTimeChange = (e) => {
      selectedLockTime.value = lockTimes.value[e.detail.value]
    }
    
    const checkUpdate = () => {
      uni.showToast({
        title: '当前已是最新版本',
        icon: 'none'
      })
    }
    
    const showHelp = () => {
      uni.showToast({
        title: '帮助中心功能待开发',
        icon: 'none'
      })
    }
    
    const logout = () => {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.redirectTo({
              url: '/pages/login/login'
            })
          }
        }
      })
    }
    
    return {
      lockTimes,
      selectedLockTime,
      onLockTimeChange,
      checkUpdate,
      showHelp,
      logout
    }
  }
}
</script>

<style scoped>
.settings-container {
  padding: 20rpx;
}

.settings-section {
  margin-bottom: 30rpx;
}

.section-header {
  font-size: 32rpx;
  font-weight: bold;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 20rpx;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.setting-item:last-child {
  border-bottom: none;
}

.picker-value {
  color: #999;
}

.arrow {
  color: #999;
}

.logout-btn {
  background-color: #ff5a5a;
  color: white;
  border-radius: 10rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
}
</style>
